<template>
  <div class="history-container" >
    <div class="pro-list">
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米</div>
          <div class="product-spec">25kg装</div>
          <div class="product-price">&yen;25.00+70积分<span class="line">&yen;250.00</span></div>
        </div>
      </div>
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米</div>
          <div class="product-spec">25kg装</div>
          <div class="product-price">&yen;25.00+70积分<span class="line">&yen;250.00</span></div>
        </div>
      </div>
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米</div>
          <div class="product-spec">25kg装</div>
          <div class="product-price">&yen;25.00+70积分<span class="line">&yen;250.00</span></div>
        </div>
      </div>
    </div>
    <!-- <div class="load-more" @click="loadMore">查看更多</div> -->
    <div class="blank"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },

  methods: {
  },

  created () {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
  },

  mounted () {
    this.count = this.$store.state.count
  },

  onReachBottom () {
    console.log('分页加载。。。')
  }
}
</script>

<style scoped>
.history-container {
  background-color: #f9f9f9;
}

.product {
  display: inline-flex;
  width: 100%;
  background-color: #fff;
}
.product + .product {
  border-top: 1rpx solid #f9f9f9;
}
.product-img {
  margin: 10rpx 20rpx;
  width: 230rpx;
  height: 160rpx;
}

.right-desc {
  height: 160rpx;
  width: 480rpx;
  font-size: 26rpx;
  padding-right: 20rpx;
}
.product-name,
.product-spec {
  font-size: 26rpx;
  line-height: 55rpx;
}

.product-spec {
  color: #666;
}

.product-price {
  margin-top: 25rpx;
  color: #e62225;
}

.line {
  margin-left: 40rpx;
  text-decoration: line-through;
}
.icon-cart {
  margin-top: 50rpx;
  background-color: #22ac38;
  font-size: 30rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  width: 57rpx;
  height: 57rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-nowrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.load-more {
  width: 100%;
  padding: 100rpx 0;
  text-align: center;
  color: gray;
  font-size: 26rpx;
}
.blank {
  height: 200rpx;
  width: 100%;
}
</style>
